<!-- 用户列表 -->
<template>
    <el-container class="home-container" >
        <el-header>
            <div>
              <span>个人学习空间系统</span>
            </div>

            <div>
              <el-button type = "info" round @click="logout">退出</el-button>
            </div>
          </el-header>


        <el-main>
            <div class="userList_bg">
                <!-- 面包屑导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>管理员权限</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 卡片 -->
                <el-card>
                    <!-- 搜索区域 -->
                    <el-row>
                        <el-col :span="4">
                            <el-input 
                                v-model="queryInfo.username" 
                                clearable
                                placeholder="用户名">
                            </el-input>    
                        </el-col>
                        <el-col :span="5" :offset="1">
                            <el-input 
                                v-model="queryInfo._id" 
                                clearable
                                placeholder="id搜索" >
                                <!-- <el-button slot="append" icon="el-icon-search"
                                    @click="getUserList"></el-button> -->
                            </el-input>    
                        </el-col>                           
                    </el-row>
                    <br>
                    <el-row>
        
                        <el-col :span="3" >
                          <el-select v-model="queryInfo.initialLevel" clearable placeholder="初学者等级" size="small">
                            <el-option
                              v-for="(item , index) in options.level"
                              :key="item"
                              :label="item"
                              :value="index">
                            </el-option>
                          </el-select>  
                        </el-col>
                        <el-col :span="2" :offset="1">
                          <el-select v-model="queryInfo.planning" clearable placeholder="未来计划" size="small">
                            <el-option
                              v-for="(item , index) in options.plan"
                              :key="item"
                              :label="item"
                              :value="index">
                            </el-option>
                          </el-select>  
                        </el-col>                
                        <el-col :span="3" :offset="1">
                          <el-select v-model="queryInfo.learnPurpose" clearable placeholder="目标方向" size="small">
                            <el-option
                              v-for="(item , index) in options.purpose"
                              :key="item"
                              :label="item"
                              :value="index">
                            </el-option>
                          </el-select>  
                        </el-col>                 
                        <el-col :span="2" :offset="1">
                          <el-select v-model="queryInfo.learnStyle" clearable placeholder="目标方向" size="small">
                            <el-option
                              v-for="(item , index) in options.how"
                              :key="item"
                              :label="item"
                              :value="index">
                            </el-option>
                          </el-select>  
                        </el-col> 
                        <el-col :span="2" :offset="1">
                          <el-button  icon="el-icon-search" type="primary" @click="getUserList">搜索</el-button> 
                        </el-col>
                        
                    </el-row>
        
                        
          
                    <!-- 用户列表区域 -->
                    <el-table :data="userlist"  stripe border >
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="姓名" prop="username"></el-table-column>
                        <el-table-column label="ID" prop="_id"></el-table-column>
                        <el-table-column label="初始等级" prop="initialLevel"></el-table-column>
                        <el-table-column label="学习目的" prop="learnPurpose"></el-table-column>
                        <el-table-column label="学习计划" prop="planning"></el-table-column>
                        <el-table-column label="学习方式" prop="learnStyle"></el-table-column>
                        <el-table-column label="学习风格" prop="style"></el-table-column>
                        <el-table-column label="操作" >
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top">
                                    <el-button type="primary" icon="el-icon-edit"
                                       @click="showEditDialog(
                                           scope.row._id,
                                           scope.row.username,
                                           scope.row.initialLevel,
                                           scope.row.learnPurpose,
                                           scope.row.planning,
                                           scope.row.learnStyle ,
                                           scope.row.style)" >
                                        </el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="删除此用户" placement="top">
                                    <el-button type="danger" icon="el-icon-delete"
                                    @click="DelUserByID(scope.row._id)"></el-button>
                                </el-tooltip>
                                
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页功能 -->
                   <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page"
                        :page-sizes="[1, 2, 5, 10]"
                        :page-size="limit"
                        layout="total,sizes,prev,pager,next,jumper"
                        :total="total">
                    </el-pagination>
                </el-card>
                <!-- 修改用户的对话框 -->
                <el-dialog
                    title="修改用户" :visible.sync="editDialogVisible"
                    width="50%" @close="editDialogClosed">
                    <!-- 内容 -->
                    <el-form :model="editForm" :rules="editformRules" ref="editFormRef" label-width="90px">
                        <el-form-item label="用户名" style="width:82%">
                          <el-input v-model="editForm.username" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="ID" props="_id" style="width:82%">
                            <el-input v-model="editForm._id" disabled></el-input>
                        </el-form-item>
                        <!-- props="initialLevel" -->
                        <!-- <el-form-item label="初始等级" >
                            <el-input v-model="editForm.initialLevel" ></el-input>
                        </el-form-item>
                        <el-form-item label="学习目的" >
                            <el-input v-model="editForm.learnPurpose" ></el-input>
                        </el-form-item>
                        <el-form-item label="学习计划" >
                            <el-input v-model="editForm.planning" ></el-input>
                        </el-form-item>
                        <el-form-item label="学习方式" >
                            <el-input v-model="editForm.learnStyle" ></el-input>
                        </el-form-item>
                        <el-form-item label="学习风格" >
                            <el-input v-model="editForm.style" ></el-input>
                        </el-form-item> -->
                        <el-form-item label="初始等级" prop="initialLevel">
                            <el-select v-model="editForm.initialLevel" placeholder="请选择" style="width:60%">
                              <el-option label="有ACM,NIO,软件开发基础经验" value=1></el-option>
                              <el-option label="科班生" value=2></el-option>
                              <el-option label="跨专业学生" value=3></el-option>
                            </el-select>
                        </el-form-item>
        
                        <el-form-item label="学习目的" prop="learnPurpose">
                            <el-select v-model="editForm.learnPurpose" placeholder="请选择" style="width:60%">
                              <el-option label="后端技术" value=1></el-option>
                              <el-option label="前端技术" value=2></el-option>
                              <el-option label="计算机基础" value=3></el-option>
                              <el-option label="技术手段" value=4></el-option>
                              <el-option label="其他" value=5></el-option>
                            </el-select>
                        </el-form-item>
        
                        <el-form-item label="学习计划" prop="planning">
                            <el-select v-model="editForm.planning" placeholder="请选择" style="width:60%">
                                <el-option label="就业" value=2></el-option>
                                <el-option label="科研" value=1></el-option>
                                <el-option label="留学" value=3></el-option>
                                <el-option label="学习技能" value=4></el-option>
                            </el-select>
                        </el-form-item>
        
                        <el-form-item label="学习方式" prop="learnStyle">
                            <el-select v-model="editForm.learnStyle" placeholder="请选择" style="width:60%">
                                <el-option label="喜欢看书自学" value=2></el-option>
                                <el-option label="喜欢动手实践" value=1></el-option>
                                <el-option label="喜欢上课交流学习或看视频" value=3></el-option>
                                <el-option label="其他" value=4></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 页脚 -->
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editUserInfo()">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
          
        </el-main>
    </el-container>
    
</template>

<script>
    // import Mock from '../api/user.js';
    import {reset} from '../../router/index.js';
export default {
    data(){
        return{
            // 搜索关键字
            // query:'',
            //当前页数
            page:1,
            // 每页展示用户数量的大小
            // pagesize:5,
            limit:2,
            userlist:[
            ],
            total:0,
            i:0,
            queryInfo:{
              username:'',
              _id:'',
              learnStyle:'',
              planning:'',
              learnPurpose:'',
              initialLevel:''
            },
            options:{ 
              level:["有开发基础经验","科班生","跨专业学生"],
              purpose:["后端技术","前端技术","计算机基础","技术手段","其他"],
              plan:["科研","就业","留学","学习技能"],
              how:["喜欢实践","喜欢自学","喜欢交流","其他"]    
            },
            editDialogVisible:false,
            // 查询到的用户信息
            editForm:{
                
            },
            editForm111:{
                
            },

            // 表单验证规则对象
            editformRules:{
 
                    initialLevel:[
                        { required: true, message: '请选择一项', trigger: 'change' },
                    ], 
                    learnPurpose:[
                        { required: true, message: '请选择一项', trigger: 'change' },
                    ], 
                    planning:[
                        { required: true, message: '请选择一项', trigger: 'change' },
                    ], 
                    learnStyle:[
                        { required: true, message: '请选择一项', trigger: 'change' },
                    ],
                },
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            // get方法请求  地址 与 参数（参数最好定义到data中）
            let condition = {limit:this.limit, page:this.page}
            console.log(this.queryInfo)
            for ( let item in this.queryInfo){
                console.log(item)
                if (this.queryInfo[item] !=='')
                    condition[item] = this.queryInfo[item]
                console.log(typeof this.queryInfo[item])
                if( typeof this.queryInfo[item] === 'number'){
                    condition[item] =  condition[item]+1
                }
            }
            // console.log(condition)
            const { data:res} = await this.$http.get('admin/find', {params:condition})
            console.log(res)
            if(res.status !==200){
                return this.$message.error('获取用户列表失败')
            }
            this.userlist=res.data.list
            this.total= res.data.list.length ===1 ? 1:res.data.total*this.limit
            this.page = res.data.page

            var i=0
            for(i=0;i<(this.total*this.limit);i++){
                this.userlist[i].style=this.userlist[i].style.join(",")
                // 初始等级
                if(res.data.list[i].initialLevel==1)
                    this.userlist[i].initialLevel="ACM等参与者"
                else if(res.data.list[i].initialLevel==2)
                    this.userlist[i].initialLevel="科班生"
                else if(res.data.list[i].initialLevel==3)
                    this.userlist[i].initialLevel="跨专业或爱好者"
                //学习目的
                if(res.data.list[i].learnPurpose==1)
                    this.userlist[i].learnPurpose="后端技术"
                else if(res.data.list[i].learnPurpose==2)
                    this.userlist[i].learnPurpose="前端技术"
                else if(res.data.list[i].learnPurpose==3)
                    this.userlist[i].learnPurpose="计算机基础"
                else if(res.data.list[i].learnPurpose==4)
                    this.userlist[i].learnPurpose="技术手段"
                else if(res.data.list[i].learnPurpose==5)
                    this.userlist[i].learnPurpose="其他"

                // 学习计划
                if(res.data.list[i].planning==1)
                    this.userlist[i].planning="科研"
                else if(res.data.list[i].planning==2)
                    this.userlist[i].planning="就业"
                else if(res.data.list[i].planning==3)
                    this.userlist[i].planning="留学"
                else if(res.data.list[i].planning==4)
                    this.userlist[i].planning="学习技能"
                
                // 学习方式
                if(res.data.list[i].learnStyle==1)
                    this.userlist[i].learnStyle="喜欢动手实践"
                else if(res.data.list[i].learnStyle==2)
                    this.userlist[i].learnStyle="喜欢看书自学"
                else if(res.data.list[i].learnStyle==3)
                    this.userlist[i].learnStyle="喜欢上课交流学习或看视频"
                else if(res.data.list[i].learnStyle==4)
                    this.userlist[i].learnStyle="其他"
            }
            // console.log(this.userlist)
        },
        //监听pagesize改变的事件
        // 改变页面大小，再次发起请求
         handleSizeChange(newSize){
            this.limit=newSize
            this.getUserList()
        },
        //监听页码值改变的事件
        handleCurrentChange(newPage){
            this.page=newPage
            this.getUserList()
        },
        handlePrevClick($var) {
          console.log('上一页: ', $var)
          this.page = $var
          this.getUserList()
        },
        handleNextClick($var) {
          console.log('下一页: ', $var)
          this.page = $var
          this.getUserList()
        },
        // 修改用户操作  跳出弹窗
        async showEditDialog(_id,username,initialLevel,learnPurpose,planning,learnStyle,style){
            // console.log(id)
            // const { data:res} = await this.$http.get('users/'+id)
            // console.log(res)
            // if (res.status !==200) {
            //     return this.$message.error('查询用户失败！')
            // }
            // this.editForm = res.data
            this.editForm._id=_id
            this.editForm.username=username
            // this.editForm.initialLevel=initialLevel
            // this.editForm.learnPurpose=learnPurpose
            // this.editForm.planning=planning
            // this.editForm.learnStyle=learnStyle
            // this.editForm.style=style

            this.editDialogVisible=true

            // console.log(this.editForm.style)
        },
        // 删除用户操作
        async DelUserByID(_id){
            console.log(_id)
            // 弹框询问
            const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }
            ).catch(err => err)

            // 如果用户确认删除，则返回值为字符串 confirm
            // 如果用户取消删除，则返回值为字符串 cancel
            if(confirmResult !='confirm'){
                return this.$message.info('已取消删除')
            }

            console.log('确定了删除')
            // var id=_id
            // console.log(id)
            
            var param={id:_id}
            const {data:res}=await this.$http.delete('admin/delete',{ data:param})
            console.log(res)
            this.getUserList()
            if(res.status !==200) {
                return this.$message.error('删除用户失败！'+ res.message)
            }

            return this.$message.success('删除用户成功！')
            

        },
        // 弹窗关闭时重置
        editDialogClosed(){
            this.$ref.editFormRef.resetFields()
        },
        // 点击确认 提交数据请求
        async editUserInfo(){
            // 转化列表   便于后端操作

            if(this.editForm.initialLevel=="ACM等参与者") this.editForm111.initialLevel=1
            if(this.editForm.initialLevel=="科班生") this.editForm111.initialLevel=2
            if(this.editForm.initialLevel=="跨专业或爱好者") this.editForm111.initialLevel=3

            if(this.editForm.learnPurpose=="后端技术") this.editForm111.learnPurpose=1
            if(this.editForm.learnPurpose=="前端技术") this.editForm111.learnPurpose=2
            if(this.editForm.learnPurpose=="计算机基础") this.editForm111.learnPurpose=3
            if(this.editForm.learnPurpose=="技术手段") this.editForm111.learnPurpose=4
            if(this.editForm.learnPurpose=="其他") this.editForm111.learnPurpose=5

            if(this.editForm.planning=="科研") this.editForm111.planning=1
            if(this.editForm.planning=="就业") this.editForm111.planning=2
            if(this.editForm.planning=="留学") this.editForm111.planning=3
            if(this.editForm.planning=="学习技能") this.editForm111.planning=4

            if(this.editForm.learnStyle=="喜欢动手实践") this.editForm111.learnStyle=1
            if(this.editForm.learnStyle=="喜欢看书自学") this.editForm111.learnStyle=2
            if(this.editForm.learnStyle=="喜欢上课交流学习或看视频") this.editForm111.learnStyle=3
            if(this.editForm.learnStyle=="其他") this.editForm111.learnStyle=4

            this.editForm111.id=this.editForm._id
            this.editForm111.username=this.editForm.username
            console.log(this.editForm)
            console.log(this.editForm111)

            // 修改请求
            const {data:res} = await this.$http.put('admin/change',this.editForm111)
            if(res.status !==200){
                return this.$message.error('更新用户信息失败！' + res.message)
            }

            // 关闭对话框
            this.editDialogVisible = false
            // 刷新数据列表
            this.getUserList()
            // 提示修改成功
            this.$message.success('更新用户信息成功！')
        },
        logout () {
        //清空token，跳转到login
        
        window.sessionStorage.clear()

        this.$router.push('/login')
        reset()
        },

    }
}
</script>

<style  scoped>
.userList_bg{
    margin: 20px;
}
</style>